import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, {ActionType} from '@ant-design/pro-table';
import {Modal, Button, Switch, Popconfirm, message} from 'antd';
import {useRef, useState} from 'react';
import ProForm, {ProFormText} from '@ant-design/pro-form';
import {deleteCardType, getCardType} from "@/services/ant-design-pro/card";
import '../../content/article.css'



const PayType = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const actionRef =  useRef<ActionType>();
  // 弹出删除框
  const text = '你确定要删除吗?';
  // 弹出模态框
  const alertModel = ()=>{
    setIsModalVisible(true);
  }
  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const columns= [
    {
      title: 'ID',
      dataIndex: 'id',
      search:false,
      align:"center"
    },
    {
      title: '会员名',
      dataIndex: 'title',
      search:false,
      align:"center"
    },
    {
      title: '有限期(天)',
      dataIndex: 'vip_day',
      search:false,
      align:"center"
    },
    {
      title: '原价',
      dataIndex: 'price',
      initialValue: 'all',
      search:false,
      align:"center"
    },
    {
      title: '优惠价',
      dataIndex: 'new_price',
      initialValue: 'all',
      search:false,
      align:"center"
    },
    {
      title: '排序',
      dataIndex: 'sort',
      valueType: 'dateTime',
      sorter: true,
      hideInSearch: true,
      width:180,
      align:"center"
    },
    {
      title: '是否开启',
      dataIndex:'status',
      ellipsis: true,
      copyable: true,
      search:false,
      align:"center",
      render: (_,record) => [
        <Switch
          checkedChildren="启用"
          unCheckedChildren="禁用"
          defaultChecked
          onChange={ async(state)=>{
            getCardType({
              id:record.id,
              status:state ? 1 : 0
            }).then(()=>{
              message.success('操作成功！')
              actionRef.current?.reload();
            })
          }}
        />,
      ],
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      align:"center",
      valueType: 'option',
      render: (_,record) => [
        <a key="link2" onClick={alertModel}>编辑</a>,
        <a key="link2">
          <Popconfirm
            placement="top"
            title={text}
            okText="确定"
            cancelText="取消"
            onConfirm={async ()=>{
              await deleteCardType({id:record.id})
              message.success('删除成功！')

              actionRef.current?.reload()
            }}
            onCancel={()=>{
              message.success('取消删除成功！')

              actionRef.current?.reload()
            }}
          >
            删除
          </Popconfirm>
        </a>,

      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params)=>{
          const {data,meta} = await  getCardType({...params})
          return {
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        rowKey="id"
        search={{
          optionRender: false,
          collapsed: false,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button key="button" type="primary" onClick={alertModel}>
            添加类型
          </Button>,
        ]}
      />
      <Modal footer={null} title="添加分类" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <ProForm>
          <ProFormText
            name="title"
            label="分类名称"
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
          <ProFormText
            name="title"
            label="分类简介"
            placeholder="请输入分类简介！"
            rules={[{required: true, message: '请输入分类简介！'}]}
          />
          <ProFormText
            name="title"
            label="分类图片"
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
          <ProFormText
            name="title"
            label="排序"
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
          <ProFormText
            name="title"
            label="状态"
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
        </ProForm>
      </Modal>
    </PageContainer>
  )
}

export default PayType;
